<template>
  <div
    class="food-item"
    @click="$router.push({ name: 'foodDetail', params: { id: f_item.id } })"
  >
    <div class="left-img">
      <slot>
        <img
          v-lazy="BaseURL + f_item.food_img[0]"
          @click.stop="showThisImage"
        />
      </slot>
    </div>
    <ul class="right-text" v-longpress="showActionSheet">
      <li class="food_name">菜品名：{{ f_item.food_name }}</li>
      <li class="sale-count">销量：{{ f_item.sales }}</li>
      <li class="price">价格：{{ f_item.price }} 元</li>
    </ul>
  </div>
</template>

<script setup>
import { inject } from "vue";
import { showImagePreview } from "vant";
import { useStore } from "vuex";
const BaseURL = inject("BaseURL");
const props = defineProps({
  f_item: {
    type: Object,
    require: true,
  },
});
const showThisImage = (e) => {
  let temp = [];
  props.f_item.food_img.forEach((item) => {
    temp.push(BaseURL + item);
  });
  showImagePreview(temp);
};

  const store = useStore();
const showActionSheet = (e) => {
  store.commit("showActionSheet", {
    list: ["添加收藏", "打赏点赞", "祖国统一"],
    success: function (index) {
      if (index == 0) {
        console.log("收藏成功");
      } else if (index == 1) {
        console.log("一块钱我也不嫌少");
      } else if (index == 2) {
        console.log("时刻准备着");
      }
    },
  });
};
</script>

<style lang="scss" scoped>
.food-item {
  display: flex;
  height: 90px;
  border-bottom: 1px solid lightgray;
  box-sizing: border-box;
  padding: 2px 5px;
  .left-img {
    width: 110px;
    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
  .right-text {
    flex: 1;
    margin-left: 5px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    .food_name {
      font-size: 18px;
      font-weight: bold;
    }
    .sale-count {
      color: red;
    }
    .price {
      font-size: 12px;
    }
  }
}
</style>